<!-- 二维码分享 -->
<template>
  <view class="image-container">
    <!-- 使用 aspectFit 模式确保图片完整显示且不裁剪 -->
    <image
      :src="image"
      mode="aspectFit"
      class="fullscreen-image"
      lazy-load="true"
      @longpress="handleLongPress"
    />
    <view
      style="position: absolute; bottom: 20px; color: white; font-size: 15px"
      >长按图片下载</view
    >
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShareAppMessage } from "@dcloudio/uni-app";
const image = ref(""); // 初始化为空字符串
import { showToast } from "../../utils/toast";

const handleLongPress = () => {
  if (!image.value) {
    showToast("图片地址无效");
    return;
  }
  uni.showActionSheet({
    itemList: ["保存图片到相册"],
    success: () => {
      uni.showLoading({ title: "保存中..." });
      uni.downloadFile({
        url: image.value,
        timeout: 10000,
        success: (res) => {
          uni.hideLoading();
          console.log(res);
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => showToast("保存成功"),
              fail: (e) => {
                console.error("保存失败：", e);
                if (e.errMsg.includes("auth deny")) {
                  showToast("请开启相册权限");
                  uni.openSetting({
                    success: (setting) => {
                      if (setting.authSetting["scope.writePhotosAlbum"]) {
                        showToast("权限已开启，请重试");
                      }
                    },
                  });
                } else {
                  showToast("保存失败");
                }
              },
            });
          } else {
            showToast(`下载失败：状态码${res.statusCode}`);
          }
        },
        fail: (e) => {
          uni.hideLoading();
          showToast("下载失败，请检查图片地址");
        },
      });
    },
  });
};
onShareAppMessage(() => {
  return {
    title: "分享图片页面", // 分享标题，可自定义
    path: "/pages/index/index", // 分享的页面路径，需替换为实际路径
    // imageUrl: image.value, // 若希望分享时有缩略图，可使用当前图片地址
  };
});
onLoad((e) => {
  image.value = e.img || "";
  if (!image.value) {
    showToast("获取推广码失败，请联系管理员");
  }
});
</script>

<style scoped>
/* 容器充满整个屏幕 */
.image-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw; /* 占满屏幕宽度 */
  height: 100vh; /* 占满屏幕高度 */
  background-color: #6829d0; /* 背景色（图片未充满区域显示） */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  overflow: hidden; /* 隐藏可能的溢出 */
}

/* 图片样式：随容器缩放，保持完整 */
.fullscreen-image {
  width: 100%; /* 最大宽度为容器宽度 */
  height: 100%; /* 最大高度为容器高度 */
  /* 配合 aspectFit 模式，确保图片完整显示且居中 */
}
</style>
